﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>검색된 요소를 변경하기</title>

    <style type="text/css">
        button { display:block; margin:3px; color:Red; width:200px; }
        div { color:Red; border:2px solid blue; width:200px;
              margin:3px; text-align:center; }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

        	$("button").click(function(){
        		$(this).replaceWith("<div>"+$(this).text()+"</div>");
        	});

            });

    </script>

</head>

<body>

    <button>First</button>
    <button>Second</button>
    <button>Third</button>

</body>

</html> 
